<template>
  <button type="button" :class="classes" :style="style" @click="onClick">
    {{ label }}
  </button>
</template>

<script>
import '@/install.ts';
import './index.scss';
import { computed, defineComponent } from '@vue/composition-api';

export default defineComponent({
  name: 'MyButton',

  props: {
    label: {
      type: String,
      required: true,
    },
    primary: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: 'medium',
      validator(value) {
        return ['small', 'medium', 'large'].indexOf(value) !== -1;
      },
    },
    backgroundColor: {
      type: String,
      default: undefined,
    },
  },
  setup(props, { emit }) {
    const classes = computed(() => ({
      'storybook-button': true,
      'storybook-button--primary': props.primary,
      'storybook-button--secondary': !props.primary,
      [`storybook-button--${props.size}`]: true,
    }));
    const style = computed(() => ({
      backgroundColor: props.backgroundColor,
    }));
    const onClick = () => {
      emit('onClick');
    };
    return { onClick, style, classes };
  },
});
</script>
